﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Events Error Donut";
}

<h2>EventsDonut</h2>

<fieldset>
    <legend>Errors Chart</legend>
    <div id="chart" style="min-width: 800px; min-height: 600px;">
    </div>
</fieldset

@section AsideLeft{
    @Html.Partial("ErrorNavigation")
}

@section Foot {
<script src="@Url.Content("~/Scripts/highcharts.js")" type="text/javascript" ></script>
<script type="text/javascript">
var options, chart;
$(document).ready(function () {
    options = {
        chart: {
             renderTo: 'chart',
             defaultSeriesType: 'column'
         },
        title: {
            text: 'Events'
        },
        tooltip: {
             formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
             }
        },
        xAxis: {
         categories: []
          },
          yAxis: {
             min: 0,
             title: {
                text: 'Total fruit consumption'
             },
             stackLabels: {
                enabled: true,
                style: {
                   fontWeight: 'bold',
                   color: 'gray'
                }
             }
          },
        plotOptions: {
         column: {
            stacking: 'normal',
            dataLabels: {
               enabled: true,
               color: 'white'
            }
         }
      },
        series: []
    };

    //GO
    $.getJSON('@(Url.Action("EventsErrorStackedData"))', function (data) {
        $.each(data.categories, function (catkey, cat) {
            options.xAxis.categories.push(cat);
        });

        $.each(data.series, function (typekey, type) {
            var serie = {
                name: type.name,
                data: type.data
            };
            
            options.series.push(serie);
        });

        chart = new Highcharts.Chart(options);
    });
});
</script>
}